<script setup>
import screenfull from 'screenfull';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const route = useRoute();

const search = computed({
	get() {
		return route.query.search ?? '';
	},
	set(_search) {
		router.replace({ 'query': { search: _search } });
	}
});

const allowDrop = (ev) => {
	ev.preventDefault();
};

const drag = (ev) => {
	ev.dataTransfer.setData('Text', ev.target.id);
};

const drop = (ev) => {
	var data = ev.dataTransfer.getData('Text');
	ev.target.appendChild(document.getElementById(data));
	ev.preventDefault();
};
const show = ref(true);
const showItem = () => {
	show.value = !show.value;
};
const handleScreen = () => {
	if (screenfull.isEnabled) {
		screenfull.request();
	} else {
		// Ignore or do something else
	}
};
</script>

<template>
  <div>
    <div class="drag-parent" @drop="drop($event)" @dragover="allowDrop($event)">
      content
    </div>
    <div
      class="drag-item"
      draggable="true"
      id="item1"
      @dragstart="drag($event)">
      drag item1
    </div>
    <el-drawer
      v-model="show"
      title="drag-item"
      :append-to-body="true"
      :modal="true">
      <div
        class="drag-parent"
        @drop="drop($event)"
        @dragover="allowDrop($event)">
        content
      </div>
      <div
        class="drag-item"
        draggable="true"
        id="item2"
        @dragstart="drag($event)">
        drag item2
      </div>
    </el-drawer>
    <el-button @click="showItem">show</el-button>
    <el-button @click="handleScreen">screenfull</el-button>
    <h2>AboutView</h2>
    <label> Search: <input v-model.trim="search" maxlength="20" /> </label>
  </div>
</template>

<style lang="less">
.drag-parent {
  width: 100%;
  height: 200px;
  border: 1px dashed #ddd;

  .drag-item {
  }
}
</style>
